<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <style>
        body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.map-container {
    position: relative;
}

.map {
    width: 1500px; /* 地图的宽度 */
    height: 800px; /* 地图的高度 */
}   

.marker {
    position: absolute;
    width: 200px; /* 标记框的宽度 */
    height: 25px; /* 标记框的高度 */
    border: 10px solid #7e8d2e; /* 标记框的边框样式 */
    padding: 0px; /* 添加内边距以容纳输入框 */
}

  .hh{

    
    border: none; 
    padding: 3px; 
    background-color: #c4cf8a;
    text-align: center;
}
a:hover{
            color: rgb(7, 113, 51);
            background-color: #c4cf8a;
        }
        a{
            text-decoration: none;
            color: black;
            font: 18px 楷体;
            font-weight: 600;
        }
    </style>
</head>
<body>
    <div class="map-container">
        <img src="./素材/六合手绘地图.jpg" alt="地图" class="map">
        <div class="marker" style="top: 110px; left: 200px;" id="m1">
            <div class="hh">
                <a href="./素材/竹镇/竹镇.html">竹镇抗日民主政府旧址</a>
            </div>
        </div>
        <div class="marker" style="top: 50px; left: 880px;" id="m2">
            <div class="hh">
                <a href="./素材/茉莉谷/茉莉谷.html">中华茉莉谷河王湖基地</a>
            </div>
        </div>
        <div class="marker" style="top: 170px; left: 750px;" id="m3">
            <div class="hh">
                <a href="./素材/农民画/农民画.html" >六合农民画艺术中心</a>
            </div>
        </div>
        <div class="marker" style="top: 200px; left: 1090px;" id="m4">
            <div class="hh">
                <a href="./素材/桂子山/桂子山.html" >桂子山烈士陵园</a>
            </div>
        </div>
        <div class="marker" style="top: 260px; left: 1218px;" id="m5">
            <div class="hh">
                <a href="./素材/金牛山/金牛山.html">金牛山战斗纪念碑</a>
            </div>
        </div>
        <div class="marker" style="top: 481px; left: 1246px;" id="m6">
            <div class="hh">
                <a href="./素材/采风碑/采风碑.html">茉莉花采风纪念碑</a>
            </div>
        </div>
        <div class="marker" style="top: 421px; left: 890px;" id="m7">
            <div class="hh">
                <a href="./素材/石柱林/石柱林.html">江苏六合国家地质公园</a>
            </div>
        </div>
        <div class="marker" style="top: 630px; left: 634px;" id="m8">
            <div class="hh">
                <a href="./素材/电商/电商.html">六合农业电商服务中心</a>
            </div>
        </div>
        
    </div>
    
</body>
</html>